<template>
  <div>
    <el-form style="overflow: auto" :inline="true" @submit.native.prevent>
      <el-form-item>
        <el-col :span="10">
          <el-form-item style="margin-right: 0">
            <el-date-picker
              @change="selStartTime"
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="timestamp"
              placeholder="开始时间"
              v-model="typeInfo.startTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col style="text-align: center" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="endTime">
            <el-date-picker
              @change="selEndTime"
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="timestamp"
              placeholder="结束时间"
              v-model="typeInfo.endTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-select
          style="width: 160px"
          v-model="typeInfo.projectId"
          placeholder="请选择项目"
        >
          <el-option
            :label="projectItem.title"
            :value="projectItem.id"
            v-for="(projectItem, index) in projectOption"
            :key="index"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="hasAuth('sys:project:publish')">
        <el-select
          style="width: 160px"
          v-model="typeInfo.roleId"
          placeholder="请选择教研室"
        >
          <el-option
            :label="departmentItem.roleName"
            :value="departmentItem.roleId"
            v-for="(departmentItem, index) in departmentsOption"
            :key="index"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          style="width: 160px"
          v-model="typeInfo.status"
          placeholder="请选择项目状态"
        >
          <el-option label="全部" value=""> </el-option>
          <el-option label="已完成" :value="1"> </el-option>
          <el-option label="未完成" :value="0"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model.trim="typeInfo.nickName"
          placeholder="请输入用户名"
          style="margin-right: 15px"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="search()" :disabled="searchDisabled" type="primary"
          >搜索</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button @click="resetTypeInfo" :disabled="searchDisabled" type="info"
          >重置</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button @click="reportExcel" :disabled="searchDisabled" type="info">
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :infinite-scroll-disabled="disabled"
      v-el-table-infinite-scroll="load"
      stripe
      border
      :data="projectAssessList"
      infinite-scroll-delay="1000"
      style="width: 100%; overflow: auto; height: 100%"
      row-key="menuId"
    >
      <el-table-column label="项目名称" prop="projectName"></el-table-column>
      <el-table-column label="开始时间" prop="startTime"></el-table-column>
      <el-table-column label="结束时间" prop="endTime"></el-table-column>
      <el-table-column label="用户名" prop="nickName"></el-table-column>
      <el-table-column label="工号" prop="userName"></el-table-column>
      <el-table-column label="教研室" prop="major"></el-table-column>
      <el-table-column label="分数" prop="score"></el-table-column>
      <el-table-column
        label="排名"
        prop="rank"
        width="100"
        center
      ></el-table-column>
      <el-table-column label="佐证材料链接">
        <template slot-scope="scope">
          <el-button @click="downLoad(scope.row)" type="primary" size="small"
            >下载</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status != 1 ? "未完成" : "已完成" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="toProjectDetail(scope)"
            v-if="scope.row.status == 1"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
      <template slot="empty">
        {{ loading ? "加载中" : "暂无数据" }}
      </template>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 50, 100]"
      :current-page.sync="current"
      :page-size="size"
      layout="sizes, prev, pager, slot"
      :total="total"
      row-key
    >
      <el-button
        type="text"
        @click="showMore"
        v-show="total > 0"
        >下一页</el-button
      >
    </el-pagination>
  </div>
</template>

<script>
import flowDetails from "@/components/flowDetails.vue";
import { time } from "../../util/axios.js";
export default {
  name: "examine",
  data() {
    return {
      projectAssessList: [],
      disabled: false,
      loading: true,
      flowDialog: false,
      flowDetailInfo: null,
      searchDisabled: false,
      typeInfo: {
        startTime: undefined,
        endTime: undefined,
        projectId: undefined,
        roleId: undefined,
        nickName: undefined,
        status: undefined,
        page: 1,
        limit: 10,
      },
      projectOption: [],
      departmentsOption: [],
      size: 10,
      current: 1,
      total:0
    };
  },
  components: { flowDetails },
  methods: {
    // 分页
    async handleSizeChange(val) {
      this.size = val;
      this.projectAssessList = [];
      this.typeInfo.page = this.current;
        this.typeInfo.limit = this.size;
        let obj = JSON.parse(JSON.stringify(this.typeInfo));
        let result = await this.$get("/api/project/assess/list", obj);
        this.loading = false;
        if (!result.code == 200) return this.$message.error(result.msg);
        this.projectAssessList.push(...result.list);
    },
    async handleCurrentChange(val) {
      this.current = val;
      this.projectAssessList = [];
      this.typeInfo.page = this.current;
        this.typeInfo.limit = this.size;
        let obj = JSON.parse(JSON.stringify(this.typeInfo));
        let result = await this.$get("/api/project/assess/list", obj);
        this.loading = false;
        if (!result.code == 200) return this.$message.error(result.msg);
        this.projectAssessList.push(...result.list);
    },
    async showMore() {
      if (this.current < this.total / this.size) {
        this.current++;
        this.projectAssessList = [];
      this.typeInfo.page = this.current;
        this.typeInfo.limit = this.size;
        let obj = JSON.parse(JSON.stringify(this.typeInfo));
        let result = await this.$get("/api/project/assess/list", obj);
        this.loading = false;
        if (!result.code == 200) return this.$message.error(result.msg);
        this.projectAssessList.push(...result.list);
      } else {
        this.$message({
          message: "已经是最后一页",
          type: "warning",
        });
      }
    },
    async initProjectAssessList() {
      this.loading = true;
      let obj = JSON.parse(JSON.stringify(this.typeInfo));
      if (this.typeInfo.startTime) obj.startTime = time(obj.startTime);
      if (this.typeInfo.endTime) obj.endTime = time(obj.endTime);
      let result = await this.$get("/api/project/assess/list", obj);
      this.loading = false;
      if (!result.code == 200) return this.$message.error(result.msg);
      console.log(result);
      this.total = result.total
      this.projectAssessList.push(...result.list);
      // this.disabled=this.projectAssessList.length==result.data.total
      this.searchDisabled = false;
    },
    async initTypeInfo() {
      let projectOption = await this.$get("/api/projects");
      let departmentsOption = await this.$get("/api/department");
      if (projectOption.code == 200) {
        this.projectOption = projectOption.data;
      }
      if (departmentsOption.code == 200) {
        this.departmentsOption = departmentsOption.data;
      }
    },
    load() {
      this.typeInfo.page++;
      this.initProjectAssessList();
    },
    resetInfo() {
      this.projectAssessList = [];
      this.searchDisabled = true;
      this.typeInfo.page = 1;
    },
    search() {
      if (
        (this.typeInfo.startTime != undefined &&
          this.typeInfo.endTime == undefined) ||
        (this.typeInfo.endTime != undefined &&
          this.typeInfo.startTime == undefined)
      )
        return this.$message.warning("请选择完整时间区间");
      this.resetInfo();
      this.initProjectAssessList();
    },
    // 切换项目状态回调
    statusChange(val) {
      this.resetInfo();
      this.typeInfo.status = val;
      this.initProjectAssessList();
    },
    selEndTime(val) {
      if (val < this.typeInfo.startTime) {
        this.typeInfo.endTime = "";
        this.$message.warning("结束日期不能在开始日期之前");
        return;
      }
    },
    selStartTime(val) {
      if (val > this.typeInfo.endTime) {
        this.typeInfo.startTime = "";
        this.$message.warning("开始日期不能在结束日期之后");
        return;
      }
    },
    async downLoad(row) {
      let res = await this.$down(
        "/api/downloadEvidence?projectId=" +
          row.projectId +
          "&userId=" +
          row.userId,
        {},
        ".zip"
      );
    },
    async openFlowDialog(id) {
      let str = this.isMyProject ? "/api/project/flow/" : "/api/findFlow/";
      let result = await this.$get(str + id);
      if (result.code == 200) {
        this.flowDetailInfo = result.data;
        this.flowDialog = true;
      }
    },
    resetTypeInfo() {
      this.typeInfo = {
        startTime: undefined,
        endTime: undefined,
        projectId: undefined,
        roleId: undefined,
        nickName: undefined,
        status: undefined,
        page: 1,
        limit: 10,
      };
    },
    toProjectDetail(scope) {
      console.log(scope.row);
      this.$store.commit("removeAnalogueTab", "/home/projectdetails");
      this.$store.commit("setTabs", {
        name:
          "/home/projectdetails?id=" +
          scope.row.projectId +
          "&flag=approval" +
          "&uId=" +
          scope.row.userId,
        title: "项目详情",
      });
      this.$router.push(
        "/home/projectdetails?id=" +
          scope.row.projectId +
          "&flag=user" +
          "&uId=" +
          scope.row.userId
      );
    },
    async reportExcel() {
      let obj = JSON.parse(JSON.stringify(this.projectAssessList));
      obj.forEach((item) => {
        item.status = item.status == 1 ? "已完成" : "未完成";
      });
      let res = await this.$downs("/api/assess/export", { assessList: obj });
    },
  },
  mounted() {
    this.initProjectAssessList();
    this.initTypeInfo();
  },
};
</script>

<style>
</style>
